/**
 * Created by Administrator on 2017/3/2.
 */
    var fgstartX,fgstartY;//手指坐标
    var fgmoveX,fgmoveY;//移动时的手指坐标
    var startimg,endimg;//开始和结束的图片
    var startdiv,enddiv;//开始和结束的div
    var beforeW,beforeH,beforeL,beforeT;//开始时图片父级的宽高及坐标
    var lastW,lastH,lastL,lastT;//结束时图片父级的宽高及坐标
    var div=[];//div的遍历位置

// 屏幕适配
var widowH = $(window).height();
$('#xunlian').css('height',widowH);
if(widowH >450){
    $('#bg-img').css('height','100%');
}

$('#line-hand').on('touchstart',function () {
   $(this).hide();
});


//遍历获取div的位置
   $('.imgbox').each(function (i,v) {
        div[i]={
            ele:$(v),
            left:$(v).offset().left,
            right:$(v).offset().left + parseFloat($(v).css('width')),
            top:$(v).offset().top,
            bottom:$(v).offset().top + parseFloat($(v).css('height'))
        }
   });
//获取手指开始移动的位置，及选中图片及父级
    $('.img').on('touchstart',function start(e) {
        $('#zhezhao').show();
        $('#line-hand').hide();
        var fgnumber = e.originalEvent.touches.length;
            e.preventDefault();//阻止屏幕滚动
            var touch=e.originalEvent.targetTouches[0];//获取当前触摸点的列表
            $(this).css('z-index',100);
            fgstartX = touch.pageX;//手指X坐标
            fgstartY = touch.pageY;//手指Y坐标
            startimg = $(this);
            startdiv = $(this).parent();
            beforeW = startdiv.width();//第一张父级宽度
            beforeH = startdiv.height();//第一张父级高度
            beforeT = startdiv.offset().top;//第一张父级top值
            beforeL = startdiv.offset().left;//第一张父级left值

    });
//移动图片时，获取手指的坐标，并赋值给图片
    $('.img').on('touchmove',function (e) {
            e.preventDefault();
            var touch=e.originalEvent.targetTouches[0];
            fgmoveX=touch.pageX;//移动式手指的X坐标
            fgmoveY=touch.pageY;//移动时手指Y坐标
            $(this).css({'left':fgmoveX-fgstartX,'top':fgmoveY-fgstartY,'z-index':100});
            // $(this).css('left',fgmoveX-fgstartX).css('top',fgmoveY-fgstartY);//定义图片实时位置
    });
//结束时，判断手指的位置，并将图片放置到当前手指位置div内
    $('.img').on('touchend',function (e) {
        e.preventDefault();
        var touch=e.originalEvent.targetTouches[0];
        var flag;
        var array1 = [];
        var array2 =[];
        $.each(div,function(k,v){
            if(fgmoveX>div[k].left&&fgmoveX<div[k].right&&fgmoveY>div[k].top&&fgmoveY<div[k].bottom){
                flag = 1;
                array1.push(flag);
                enddiv=div[k].ele;//松开手指时所在div
                endimg=div[k].ele.children('.img');//松开手指时所在的图片
                lastW = enddiv.width();//第二张图片父级宽度
                lastH = enddiv.height();//第二张图片父级高度
                lastT = enddiv.offset().top;//第二张图片父级TOP值
                lastL = enddiv.offset().left;//第二张图片父级Left值
                if(startimg && endimg && startimg[0].src!=endimg[0].src){//判断第一张与第二张图片的src是否相同
                    var img1=startimg.clone(true);//克隆第一张图片
                    var img2=endimg.clone(true);//克隆第二张图片
                    var j =0;//定义移动的次数
                    var nowT = startimg.offset().top;//第一张图片当前top值
                    var nowL = startimg.offset().left;//第一张图片当前left值
                    var nowjianT = (nowT-lastT)/10;//第一张图片与第二张图片父级的top差值
                    var nowjianL = (nowL-lastL)/10;//第一张图片与第二张图片父级的left差值
                    var nowW = startimg.width();//第一张图片的宽度
                    var nowH = startimg.height();//第一张图片的高度
                    var nowjianW = (nowW - lastW)/10;//第一张图片的宽度与第二张图片父级的宽度差
                    var nowjianH = (nowH - lastH)/10;//第一张图片的高度与第二张图片父级的高度差
                    var lastimgW = endimg.width();//第二张图片的宽度
                    var lastimgH =endimg.height();//第二张图片的高度
                    var lastjianW = (lastimgW - beforeW)/10;//第二张图片的宽度与第二张图片父级的宽度差
                    var lastjianH = (lastimgH - beforeH)/10;//第二张图片的高度与第二张图片父级的高度差
                    var lastimgT = endimg.offset().top;//第二张图片的top值
                    var lastimgL = endimg.offset().left;//第二张图片的left值
                    var lastjianT = (lastT - beforeT)/10;//第二张图片父级与第一张图片父级的top差值
                    var lastjianL = (lastL - beforeL)/10;//第二张图片父级与第一张图片父级的left差值
                    function pianyi() {//定义两张图片循环动画
                        nowT = nowT-nowjianT;//记录第一张图片每次移动之后的top值
                        nowL = nowL-nowjianL;//记录第一张图片每次移动之后的left值

                        lastimgT = lastimgT-lastjianT;//记录第二张图片每次移动之后的top值
                        lastimgL = lastimgL-lastjianL;//记录第二张图片每次移动之后的left值

                        nowW = nowW - nowjianW;//记录第一张图片每次移动之后的宽度
                        nowH = nowH - nowjianH;//记录第一张图片每次移动之后的高度

                        lastimgW = lastimgW - lastjianW;//记录第二张图片每次移动之后的宽度
                        lastimgH = lastimgH - lastjianH;//记录第二张图片每次移动之后的高度
                        endimg.css({'width':lastimgW,'height':lastimgH,'z-index':100});
                        startimg.css({'width':nowW,'height':nowH,'z-index':101});//设置第一张图片的宽高
                        startimg.offset({top:nowT,left:nowL});//设置第一张图片的top值，left值
                        endimg.offset({top:lastimgT,left:lastimgL});//设置第二张图片的top值，left值
                        if(j==10){
                            clearInterval(time);
                            j = 0;

                            startimg.remove();
                            startdiv.prepend(img2);
                            img2.css({'z-index':0});
                            endimg.remove();
                            enddiv.prepend(img1);
                            img1.offset({top:nowT,left:nowL});
                            img1.css({'z-index':0});
                            $('#zhezhao').hide();
                        };
                    }
                     time = setInterval(function(){//循环函数
                         j++;
                         pianyi();
                     },20);
                }else{
                    $('#zhezhao').hide();
                    startimg.css('top',0).css('left',0).css('zIndex',0);
                }
            }else{
                flag =0;
                array1.push(flag);
            };
        });
        for(var p=0;p<array1.length;p++){
            if(array1[p] == 1){
                array2.push(array1[p]);
            }
        }
        if(array2.length<1){
            $('#zhezhao').hide();
            startimg.css('top',0).css('left',0).css('zIndex',0);
        }
    });